/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '~styles/variables.scss';

$row-height: 29px;
$border: 1px solid $grey-06;
$grid-padding: 0 10px;
$disabled-color: $grey-04;
$active-bg-color: $yellow-02-lighter;
$hover-bg-color: $grey-08;
$no-lineage-indicator-color: $grey-01;
$operations-color: $blue-03;
$header-bg-color: $grey-08;
$header-color: $grey-02;
$operations-width: 95px;

.field-level-lineage .fields-box {
  .empty {
    text-align: center;
    font-size: 16px;
    margin-top: 100px;
  }

  .search-container > .form-control {
    height: 26px;
    line-height: 26px;
  }

  .fields-list {
    .field-row {
      line-height: $row-height;
      display: flex;
      border-bottom: $border;
      align-items: center;

      .field-name {
        width: calc(100% - (#{$operations-width} * 2));
        padding: 0 10px;
      }

      .operations {
        width: $operations-width;
        line-height: 1;
        font-size: 0.85rem;
        white-space: pre-wrap;
        color: $operations-color;
        padding-left: 20px;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .fields-list-header {
      background-color: $header-bg-color;
      color: $header-color;
    }

    .fields-list-body {
      .field-row {
        cursor: pointer;
        position: relative;

        &:hover {
          background-color: $hover-bg-color;
        }

        &.disabled {
          cursor: not-allowed;
          color: $disabled-color;
          position: relative;
        }

        &.active {
          background-color: $active-bg-color;
        }

        .no-lineage-text {
          color: $no-lineage-indicator-color;
          background-color: $hover-bg-color;
          position: absolute;
          right: 0;
          padding: 0 15px;
        }

        // ARROWS
        $default-border: 14px solid transparent;
        $arrow-border: 21px solid $grey-06;
        $filler-default-border: 10px solid transparent;
        $filler-arrow-border: 16px solid white;
        $arrow-offset: -25px;
        $filler-offset: 3px;

        .row-arrow {
          width: 0;
          height: 0;
          border-top: $default-border;
          border-bottom: $default-border;
          position: absolute;
          cursor: initial;

          &.bordered {
            &:before {
              content: '';
              height: 0;
              width: 0;
              position: absolute;
              border-top: $filler-default-border;
              border-bottom: $filler-default-border;
              top: -10px;
            }
          }
        }

        .arrow-left {
          border-right: $arrow-border;
          left: $arrow-offset;

          &.bordered {
            border-right-color: $grey-04;

            &:before {
              border-right: $filler-arrow-border;
              left: $filler-offset;
            }
          }
        }

        .arrow-right {
          border-left: $arrow-border;
          right: $arrow-offset;

          &.bordered {
            border-left-color: $grey-04;

            &:before {
              border-left: $filler-arrow-border;
              right: $filler-offset;
            }
          }
        }
      }
    }
  }
}
